<template>
  <basic-drawer
    :visible="visible"
    title="部署规则"
    @cancel="handleCancel"
    @ok="handleOk"
    @open="handleOpen"
    @close="handleClose">
    <a-table
      v-model:selected-keys="selectedKeys"
      :columns="columns"
      :data="tableData"
      :loading="loading"
      v-bind="commonTableProps"
      class="mb-8"
      :pagination="false"
      :row-selection="defaultRowSelection"
      @selection-change="onSelectChange">
      <template #strategy="{ record }">
        <div class="flex items-center gap-x-6px">
          <i-icons-observe v-if="record.action === 3" />
          <i-icons-prevent v-if="record.action === 1" />
          <span>{{ getOptionsLabel(wafStrategyOptions, record.action) }}</span>
        </div>
      </template>
    </a-table>
  </basic-drawer>
</template>

<script setup lang="ts">
import { addWafNodeBindApi, getApiWafQueryApi } from '@/apis/modules/waf'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import {
  commonTableProps,
  defaultRowSelection,
  type BuildTabColumnsData
} from '@/utils/table'
const route = useRoute()
interface IProps {
  visible: boolean
  type: number
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  type: 1
})
interface IEmit {
  (event: 'update:visible', value: boolean): void
  (event: 'refresh'): void
}

const emit = defineEmits<IEmit>()
const params = ref<CloudFilterBarState>({
  scope: 3,
  order: 'asc',
  sort: 'priority'
})
const {
  data: tableData,
  loading,
  run,
  pagination
} = useListRequest(getApiWafQueryApi, {
  params: params,
  immediate: false
})
pagination.value.pageSize = 999
const { selectedKeys, onSelectChange } = useTable(run, tableData)

const columns = computed(() => {
  const rule: BuildTabColumnsData = {
    title: '执行策略',
    slotName: 'strategy'
  }

  const jumpModule: BuildTabColumnsData = {
    title: '跳过模块',
    dataIndex: 'jump',
    render({ record }) {
      const list = record.module_config.skip_module ?? []
      return list
        .map((item: number) => getOptionsLabel(skipModuleOptions, item))
        .join(',')
    }
  }
  const commonColumns: BuildTabColumnsData[] = [
    {
      title: '规则ID',
      dataIndex: 'id',
      format: 'copy'
    },
    {
      title: '规则名称',
      dataIndex: 'name',
      format: 'copy'
    },
    {
      title: '描述',
      dataIndex: 'condition_description'
    },

    {
      title: '状态',
      render({ record }) {
        return record.status === 1 ? '开启' : '关闭'
      }
    }
  ]
  if (props.type === 3) {
    commonColumns.splice(3, 0, jumpModule)
  } else {
    commonColumns.splice(2, 0, rule)
  }

  return buildColumns(commonColumns)
})

function handleOpen() {
  run()
  if (!route.params.id) return
  params.value.unbind_id = route.params.id as string
  params.value.module = props.type
}
// 弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
}
// 弹窗完成
const handleOk = async () => {
  await addWafNodeBindApi({
    id: route.params.id,
    module: props.type,
    waf_ids: selectedKeys.value
  })
  ToastUtils.success('部署成功')
  emit('update:visible', false)
  emit('refresh')
}
// 弹窗取消
const handleCancel = () => emit('update:visible', false)
</script>
<style lang="less" scoped></style>
